苹果的丝滑体验，竟藏在不起眼的细节中

在文章开始之前，推荐大家可以看看 2018 年的 WWDC 视频 Designing Fluid Interfaces（ 苹果官网有视频 ）， Apple 对于动画体验的思考可以说是行业内的极致，细致到每一个角落。

在这个视频中 Chan Karunamuni 里提到一个很重要的底层动画设计概念：只有当一个工具就仿佛是我们大脑的延伸时，它才会显得很“流畅”。

基于这个概念，设计师们延展出 Apple 动画设计的思路，比如动画应保持惯性和动能、动画应该考虑阻尼、动画赋予个性、动画的弹性等等，而「灵动岛」就是这些年目前 Apple 动画设计的集大成者。

接下来让我们探究下那些隐藏在灵动岛中的动画细节。

#01

向上收起

灵动岛的设计核心是希望 App 不会仅仅存在于后台，而是把一些对用户有用的信息展示在前台，所以一些有用的信息会收起到灵动岛内，我们这里以「Music 向上收起」进入灵动岛为例，逐步拆解。

Apple Music 进入灵动岛

· 动画流程 

Step 1. Music 开始缩放岛的过程中，灵动岛开始出现向上位移 + 一定的形变，开始吸收 Muisc ；
Step 2. 当 Music 彻底缩放消失后，灵动岛逐渐回弹至原状，Music 信息开始准备向外扩展； 
Step 3. Music 的封面 + 波形图案与灵动岛开始向两侧扩展，同时到最大值时有一定的反弹； 

一个简单的收起，灵动岛就展示出足够的“个性”，就像它名字那样灵动。而这个动画也与 1981 年出版的「迪士尼动画设计原则」有很多异曲同工之处。

收起 - 恢复 - 变形
比如在第一步 Music 准备进入的时候，灵动岛就展示出“接纳”的动画，这也与迪士尼动画十二原则之一的「预备动作」吻合，即在一个动作开始之前为观众做好心理准备，让这个动作更加真实。
比如当一个人要跳起来，他肯定需要先蹲下，如果缺少这个预备的蹲下动作，那么这个动画肯定是不成立的。所以灵动岛的做法就是把自身放大，开始取“吸收”这个 App，同时还伴随着“吸收“对象的惯性导致自身的形变。

在第三步时，灵动岛的动画开始展现出十二原则之一「挤压与拉伸」。Music 与灵动岛一起开始向左右拉伸并带有一定的回弹，同时系统时间、Wi-Fi 信号也产生了位移与回弹，这种表现让灵动岛更具重量感与灵活感，赋予了它更多的生命力。

任意角度的收起与惯性差异都被考虑在内

当然，Apple 的设计师们连动画的收起角度也有考虑，充分思考了「收起」这个动作的每一个细节。注意上方图片中手势分别采用往右上和左上滑动，因为惯性原因灵动岛的回弹角度也被设计的有差异。

#02

合并与分裂

App 的内容与灵动岛是绑定在一起的，当有两个 App 的内容收入灵动岛时，它自然也会展现出更多的动画细节。

让动画看起来更流畅的「运动拉伸」

我们这里以「Music 与 计时器分裂」为例，当两个 App 被收入灵动岛时，它会继续开始收起并分裂。在分裂时，灵动岛的右侧不仅展示了「运动拉伸」的特性，甚至还展示了元素之间动能的相互影响。

「计时器」随着运动惯性被拉伸，最后恢复原样

如果仔细看，你会发现电池图标因为受到的冲击动能被信号图标抵消了一部分，所以位移会比较小，这细节简直不能再“物理”了。

电池图标受到的动能较小，所以位移也较小

#03

更多的“魔鬼”

都说“魔鬼”藏在细节里，当某个灵动岛功被「放大」时，还有一些很多人注意不到的细节…

我们知道  iOS 经常通过毛玻璃效果把「层级」关系暗示出来。比如：打开某个 App 时，背景会缩放模糊；长按某个 App 图标时，背景会缩放模糊；下拉控制中心时，背景会缩放模糊等等。

iOS 通过模糊来暗示「层级」

当灵动岛在放大的过程中，左右两侧的时间、电池、信号等信息也会随着「上层」内容的覆盖而逐渐模糊消失（ 这与打开某个 App 逻辑一致 ），甚至设计师们还在这个灵动岛的底部也增加了模糊投影，来进一步暗示这种信息的层级关系。

时间、电池等被灵动岛覆盖而模糊，这与全局动画逻辑一致

灵动岛通过模糊投影来暗示「层级」

写在最后

动画传递个性，动画传递感受，动画也决定体验。

文章的结尾分享一个灵动岛动画合集供大家欣赏，一起来感受下 Apple 这家公司是如何设计用户体验的。

灵动岛动画合集

想要学习或者练习体验/交互设计的朋友，可以了解一下「体验设计学习社」。

作品集详细点评+答疑+免费训练营&学习打卡等活动，更有各类大厂内推：